<template>
  <div>
    <!-- 搜索搜索框部分 -->
    <div class="search" ref="search" v-if="$store.state.isShowSearchInput">
      <div class="searchContent">
        <div class="goBack" @click="goBack" v-if="$store.state.isBackOrSearch"></div>
        <div class="searchInputText">
          <input
            class="searchShop"
            type="text"
            placeholder="输入关键字查找办公点"
            @click="focusInput"
            v-autoFocus="isFocus"
            @input="inputVal"
            v-model="searchShopVal"
          />
        </div>
        <div class="searchPic" v-if="!$store.state.isBackOrSearch"></div>
        <div class="voiceSearch" @click="voiceSearch"></div>
      </div>
    </div>

    <!-- 语音识别模块 -->
    <VoiceRecord />
  </div>
</template>

<script>
// 语音识别模块
import VoiceRecord from "./voiceRecord";
export default {
  props: {},
  data() {
    return {
      // 点击的时候才自动聚焦
      isFocus: false,
      // 输入框输入内容
      searchShopVal: "",
      // 模糊搜索匹配结果
      searchResultsArray: []
    };
  },
  computed: {
    getInputValChange() {
      return this.$store.state.searchInputVal;
    }
  },
  watch: {
    // 监听输入框value的变换
    getInputValChange(newVal, oldVal) {
      this.searchShopVal = newVal;
    }
  },
  created() {},
  mounted() {
    this.searchWidth = this.$refs.search.clientWidth;
  },
  methods: {
    //  返回按钮
    goBack() {
      // 设置起点终点模块显示的情况下
      if (
        this.$store.state.isShowSetPoint ||
        this.$store.state.isShowShareMap
      ) {
        this.$store.commit("updateIsShowSetPoint", false);
        this.$store.commit("updateIsShowShareMap", false);
      }

      map.clearPath(true);
      map.cleanSelectUnit3D();

      // 如果寻路信息部分显示的情况
      if (this.$store.state.isShowOperation) {
        this.$store.commit("updateIsShowSearchInput", false);
      }

      this.isFocus = false;

      this.searchShopVal = "";
      // 如果模糊搜索部分存在的情况
      if (this.$store.state.isShowFuzzySearchPart) {
        // 隐藏搜索主体部分
        this.$store.commit("updateIsShowSearchContent", true);
      } else {
        // 隐藏搜索主体部分
        this.$store.commit("updateIsShowSearchContent", false);
        // 显示搜索图标
        this.$store.commit("updateIsBackOrSearch", false);
      }
      // 隐藏模糊搜索部分
      this.$store.commit("updateIsShowFuzzySearchPart", false);

      // 关闭语音识别部分
      this.$store.commit("updateIsShowSpeechRecognition", false);

      // 地图位置缩放初始化
      this.$parent.mapResetPublic();

      // 隐藏区块信息页
      this.$store.commit("updateIsShowAreaInfo", false);
    },
    // 点击输入框事件
    focusInput() {
      // 如果此时搜索主体页显示的话则不情况输入框内容
      if (this.$store.state.isShowFuzzySearchPart) {
      } else {
        this.$store.commit("updateIsShowSearchContent", true);
        this.searchShopVal = "";
      }

      this.$store.commit("updateIsBackOrSearch", true);
      this.isFocus = true;
    },
    // 输入事件
    inputVal() {
      if (this.searchShopVal.length != 0) {
        this.$store.commit("updateIsShowFuzzySearchPart", true);
        this.$store.commit("updateIsShowSearchContent", false);
        // 将输入内容进行模糊搜索
        this.matchData(this.searchShopVal.toUpperCase(), false);
      } else {
        this.$store.commit("updateIsShowFuzzySearchPart", false);
        this.$store.commit("updateIsShowSearchContent", true);
      }
    },
    // 模糊搜索
    matchData(val, ls) {
      const self = this;

      const a = mapConfig.searchBNorAN;

      self.searchResultsArray = [];

      if (this.$store.state.mapConfig.shopList) {
        this.$store.state.mapConfig.shopList.forEach(e => {
          if (e[a] && e[a].toUpperCase().indexOf(val) != -1) {
            self.searchResultsArray.push(e);
          }
        });
        if (self.searchResultsArray.length > 0) {
          this.$store.commit("updateSearchResultsArr", self.searchResultsArray);
          self.$store.commit("fuzzySearchHasNoResult", false);
        } else {
          self.$store.commit("fuzzySearchHasNoResult", true);
        }
      }
    },
    // 语音识别搜索
    voiceSearch() {
      this.$store.commit("updateIsShowSearchContent", true);
      this.$store.commit("updateIsBackOrSearch", true);

      // 显示语音识别部分
      this.$store.commit("updateIsShowSpeechRecognition", true);
    }
  },
  components: {
    VoiceRecord
  }
};
</script>

<style lang='less'>
/* 搜索搜索框部分 */
.search {
  position: fixed;
  background-color: #f7f7f3;
  width: 100%;
  height: 55px;
  left: 0;
  top: 0;
  z-index: 111;
  .searchContent {
    left: 15px;
    position: absolute;
    width: 350px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 3px;
    z-index: 10;
    transition: width 0.5s;
    .voiceSearch {
      position: absolute;
      right: 0;
      top: 0;
      height: 40px;
      width: 36px;
      background: url("../assets/images/voice.png") no-repeat center;
      background-size: 50%;
      z-index: 10;
      display: none;
    }
    .goBack {
      position: absolute;
      width: 42px;
      height: 100%;
      background: url("../assets/images/goBack.png") no-repeat center;
      background-size: 40%;
    }
    .searchInputText {
      position: absolute;
      left: 42px;
      width: 75%;
      height: 100%;
      input {
        position: absolute;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        font-size: 11px;
      }
    }
    .searchPic {
      position: absolute;
      width: 42px;
      height: 100%;
      background: url("../assets/images/search.png") no-repeat center;
      background-size: 32%;
    }
  }
  .quickSearchWorkPlace {
    height: 100%;
    width: 155px;
    position: absolute;
    right: 0;
    background-color: #f7f7f3;
    z-index: 9;
    transition: all 0.5s;
    display: flex;
    .quickSearchWorkPlace-item {
      flex: 1;
      span {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 55px;
        font-size: 13px;
      }
    }
  }
}

.van-icon {
  transition: all 0.5s;
  transform: rotate();
}
</style>
